<html>
    <head>
        <title><g:layoutTitle default="Grails" /></title>
        <link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
        <link rel="shortcut icon" href="${createLinkTo(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
        <g:layoutHead />
        <g:javascript library="prototype" />					
        <g:javascript library="scriptaculous" />					
        <g:javascript library="application" />					
    </head>
    <body>
        <div class="logo"><img src="${createLinkTo(dir:'images',file:'grails_logo.jpg')}" alt="Grails" /></div>	
        <div style="padding: 2em;">
			<span style="padding:0.2em; background-color: cyan; float: right; font-size:2em;"><g:link controller="job" action="create">Post New Job</g:link></span>
        	<g:formRemote name="searchForm" url="[controller:'category', action:'search', params:[category:params.category]]" update="content">
        		<input type="text" name="q" style="font-size: 1.5em;" value="Search for a job" onfocus="if(this.value=='Search for a job') this.value = '';" onblur="if(!this.value) this.value = 'Search for a job';" />
        		<span id="spinner" class="spinner" style="display:none;"><img src="${createLinkTo(dir:'images',file:'spinner.gif')}" alt="Spinner" /></span>
        	</g:formRemote>
        	 (e.g. "ajax", "designer, chiangmai", "php, bangkok")
        </div>
        <div id="category-menu">
			<ul style="font-size: 1.5em;">
				<li style="display:inline; margin:0; padding:0; padding-right: 2em;">
				<g:if test="${!params.category}">All</g:if>
				<g:else><g:link controller="category" action="listJob">All</g:link></g:else>
				</li>
				<g:each var="cat" in="${Category.list([sort:'displayOrder'])}">
					<li style="display:inline; margin:0; padding:0; padding-right: 2em;">
					<g:if test="${cat.name == params.category}">${cat}</g:if>
					<g:else><g:link controller="category" action="listJob" params="[category:cat.name]">${cat}</g:link></g:else>
				</li>
				</g:each>
			</ul>  
        </div>
        <div id="content" style="padding: 2em;">
        <g:layoutBody />
        </div>
    </body>	
</html>
